<template>
  <div class="login-box">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="80px"
      class="demo-ruleForm"
    >
      <h2>后台管理系统</h2>
      <el-form-item label="姓名：" prop="username">
        <el-input v-model="ruleForm.doctorName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码：" prop="password">
        <el-input
          v-model="ruleForm.doctorPassword"
          type="password"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="密码：" prop="checkpassword">
        <el-input
          v-model="ruleForm.checkPassword"
          type="password"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="部门：" prop="username">
        <el-select v-model="ruleForm.department" placeholder="注册部门">
          <el-option label="内科" value="内科" />
          <el-option label="外科" value="外科" />
          <el-option label="耳鼻喉科" value="耳鼻喉科" />
          <el-option label="妇科" value="妇科" />
          <el-option label="脑科" value="脑科" />
          <el-option label="儿科" value="儿科" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          class="login-btn"
          @click="submitForm(ruleFormRef)"
          >注册
        </el-button>
        <el-button class="login-btn" @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue'
import { registerData } from '@/type/register'
import type { ElForm } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ElNotification } from 'element-plus'
type FormInstance = InstanceType<typeof ElForm>
type FormRules = InstanceType<typeof ElForm>
import { register } from '@/request/api'
import { useRouter } from 'vue-router'

export default defineComponent({
  setup() {
    const data = reactive(new registerData())
    const rules = {
      // username: [
      //   { required: true, message: "请输入账号", trigger: "blur" },
      //   { min: 2, max: 10, message: "账号的长度在2-10之间", trigger: "blur" },
      // ],
      // password: [
      //   { required: true, message: "请输入密码", trigger: "blur" },
      //   { min: 3, max: 10, message: "密码的长度在3-10之间", trigger: "blur" },
      // ],
    }
    const ruleFormRef = ref<FormInstance>()
    const router = useRouter()
    const submitForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return
      formEl.validate((valid) => {
        if (valid) {
          // 验证成功，进行注册操作
          register(data.ruleForm)
            .then((res) => {
              console.log(res)
              if (res.data) {
                open2(res.data)
              } else {
                ElMessage.error('注册失败')
              }
            })
            .catch((error) => {
              console.error(error)
              ElMessage.error('注册异常')
            })
        } else {
          // 验证失败，返回 false 或者不做任何操作
          console.log('error submit!')
          ElMessage.error('表单验证失败')
        }
        // 确保不返回任何值
      })
    }
    //重置
    const resetForm = () => {
      data.ruleForm.doctorPassword = ''
      data.ruleForm.doctorName = ''
      data.ruleForm.department = ''
      data.ruleForm.checkPassword = ''
    }

    return {
      ...toRefs(data),
      rules,
      resetForm,
      ruleFormRef,
      submitForm,
    }
  },
})

const open2 = (msg: any) => {
  ElNotification({
    title: '提示',
    message: msg,
    duration: 0,
  })
}
</script>

<style lang="scss" scoped>
.login-box {
  width: 100%;
  height: 100%;
  background-color: #fff;
  text-align: center;
  padding: 1px;
  .demo-ruleForm {
    width: 500px;
    margin: 200px auto;
    background: #ffffff;
    padding: 40px;
    border-radius: 5px;
  }
  .login-btn {
    width: 48%;
  }
  h2 {
    margin-bottom: 20px;
  }
}
</style>

function ElNotification(arg0: { title: string; message: string; duration:
number; }) { throw new Error("Function not implemented."); }
